<template>
	<div class="login-content">
		<van-circle v-model:current-rate="currentRate" :clockwise="false" :size="46" :text="`${nowTime}`" />
		<div class="brand">
			<div class="img">
				<img src="../../../image/ResLogo.png" alt="Image" />
			</div>
			<div class="title">漫时光</div>
			<div class="title">遇见不一样的世界</div>
		</div>
		<span class="right"> 微星科技 技术支持 &copy;2023- </span>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const currentRate = ref(100)
const nowTime = ref(5)

let timer = setInterval(function () {
	currentRate.value--
	nowTime.value = Math.ceil(currentRate.value / 20)

	if (currentRate.value < 1) {
		clearInterval(timer)
		router.push('/login')
	}
}, 50)
</script>


<style lang="scss">
@import '../../styles/index.scss';

.login-content {
	display: block;
	height: 100vh;
	width: 100vw;
	position: relative;
	background-color: $g08;
	overflow-x: hidden;
	.van-circle {
		position: absolute;
		top: 18px;
		right: 18px;
	}
	> .brand {
		display: block;
		padding-top: 22vh;
		> .img {
			> img {
				width: 100vw;
			}
		}
		> .title {
			text-align: center;
			line-height: 38px;
			font-size: 0.6rem;
            color: RGB(251,190,77);
		}
	}
	> .right {
		width: 100vw;
		display: block;
		position: absolute;
		bottom: 12px;
		left: 0;
		font-size: 0.3rem;
		text-align: center;
	}
}
</style>


